<template>
  <div class='page-content user'>
    <div class="header">
      <div class="left-wrap">
        <img class="avatar" :src="userInfo.headerImg" />
        <h2>{{date}}，{{userInfo.nickName}}</h2>
        <p>新的一天又开始了</p>
        <!-- <div class="task">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconjihuadaichuli"></use>
          </svg>
          <a href="javascript:;">待审核（13）</a>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconshalou"></use>
          </svg>
          <a href="javascript:;">待发货（13）</a>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconchuli"></use>
          </svg>
          <a href="javascript:;">已发货（13）</a>
        </div> -->
      </div>
      <div class="right-wrap">
        <img src="@img/icon1.png"/>
      </div>
    </div>

    <div class="info">
      <h1 class="title">基本设置</h1>

      <el-form :model="userInfo" class="form" :rules="rules" ref="userform" 
        label-width="86px"
        label-position="top"
      >
        <el-form-item label="昵称" prop="nickName">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="userInfo.nickName" disabled />
          </el-col>
        </el-form-item>
        <el-form-item label="手机" prop="userName">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="userform.userName" />
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input type="password" v-model="userform.password" />
          </el-col>
        </el-form-item>
        <el-form-item label="职位" prop="posttype">
          <el-col :xs="24" :sm="12" :lg="6">
          <el-select v-model="userform.posttype">
            <el-option label="老板" value="老板"></el-option>
            <el-option label="总经理" value="总经理"></el-option>
            <el-option label="财务主管" value="财务主管"></el-option>
            <el-option label="采购主管" value="采购主管"></el-option>
            <el-option label="仓库主管" value="仓库主管"></el-option>
            <el-option label="销售经理" value="销售经理"></el-option>
            <el-option label="业务员" value="业务员"></el-option>
            <el-option label="系统管理员" value="系统管理员"></el-option>
            <el-option label="员工" value="员工"></el-option>
          </el-select>
          </el-col>
        </el-form-item>
        <el-form-item> 
          <el-button type="primary" style="width: 90px" @click="submitForm('userform',userInfo.id)" icon="el-icon-check">
            保 存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { UpdateUserApi } from '@/api/userApi'
  export default {
     computed: {
      ...mapState({
        userInfo: state => state.user.user.info
      })
    },
    data () {
      return {
        date: '',
        userform: {
          userName:JSON.parse(JSON.stringify(this.$store.state.user.user.info)).userName,
          password:JSON.parse(JSON.stringify(this.$store.state.user.user.info)).password,
          posttype:JSON.parse(JSON.stringify(this.$store.state.user.user.info)).posttype
        },
        rules: {
          userName: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      this.getDate()
    },
    methods: {
      getDate() {
        const d = new Date()
        const h = d.getHours()
        let date
        
        if(h >= 6 && h < 9) {
          date = '早上好'
        }else if(h >= 9 && h < 11) {
          date = '上午好'
        }else if(h >= 11 && h < 13) {
          date = '中午好'
        }else if(h >= 13 && h < 18) {
          date = '下午好'
        }else if(h >= 18 && h < 24) {
          date = '晚上好'
        }else if(h >= 0 && h < 6) {
          date = '很晚了，早点睡'
        }
        
        this.date = date
      },
      submitForm(formName,val) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let userdata =JSON.stringify(this.$store.state.user.user.info);
             userdata=JSON.parse(userdata);
             let guestcode =userdata.reguserno;
             let gscode =userdata.gscode;
              UpdateUserApi({
                guestcode: guestcode,
                gscode:gscode,
                username:this.userform.userName,
                password:this.userform.password,
                posttype:this.userform.posttype,
                id:val
              }).then(res => {
                if(res.code=="0"){
                  this.$message.success(res.msg+","+"您已修改了账号信息，请重新登录！")
                  this.loginOut()
                }
                else
                {
                  this.$message.error(res.msg)
                }
              })
          } else {
          }
        });
      },
      // 退出登录
      loginOut() {
        document.getElementsByTagName("html")[0].removeAttribute('class') // 移除暗黑主题
        this.$store.dispatch('user/setLoginStatus', false)
        this.$router.push('/login')
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

<style lang="scss">
  .user {
    .icon {
      width: 1.4em;
      height: 1.4em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  }
</style>

<style lang='scss' scoped>
  .page-content {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    background: transparent !important;

    .header {
      background: #fff;
      padding: 30px 40px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .left-wrap {
        .avatar {
          width: 110px;
          height: 110px;
          object-fit: cover;
          border-radius: 50%;
        }

        h2 {
          font-size: 30px;
          margin-top: 20px;
          font-weight: 500;
        }

        p {
          color: #9CA3AE;
          font-size: 14px;
          margin-top: 20px;
          display: none;
        }

        .task {
          margin-top: 30px;
          display: flex;
          align-items: center;

          span {
            color: #9CA3AE;
            font-size: 14px;
            margin-right: 30px;
            margin-left: 8px;
          }

          a {
            color: #9CA3AE;
            font-size: 14px;
            margin-right: 30px;
            margin-left: 8px;
            text-decoration: none;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          width: 230px;
        }
      }
    }

    .info {
      margin-top: 15px;
      background: #fff;

      .title {
        font-size: 22px;
        font-weight: 500;
        padding: 15px 40px;
        border-bottom: 1px solid #eee;
      }

      .form {
        padding: 30px 40px;
        box-sizing: border-box;
      }
    }
  }

  @media only screen and (max-width: $device-ipad) { 
    .page-content {

      .header {
        padding: 20px 20px;

        .left-wrap {
          .avatar {
            width: 90px;
            height: 90px;
          }

          h2 {
            font-size: 20px;
            margin-top: 20px;
          }

          .task {
            margin-top: 15px;

            .icon {
              width: 2.8em;
              height: 2.8em;
              vertical-align: -0.15em;
            }

            span {
              font-size: 15px;
            }
          }
        }

        .right-wrap {
          display: flex;
          align-items: center;

          img {
            display: none;
          }
        }
      }

      .info {

        .title {
          font-size: 18px;
          padding: 15px 20px;
        }

        .form {
          padding: 30px 20px;
        }
      }
    }
  }
</style>